import {
  Box,
  HStack,
  IconButton,
  Skeleton,
  Stack,
  Text,
  Tooltip,
  useClipboard,
  useColorModeValue,
} from '@chakra-ui/react';
import { UnsafeImageMetadata } from '@tourfly/api';
import { useTranslation } from 'react-i18next';
import { RiFileCopy2Line } from 'react-icons/ri';

type MetaInfo = UnsafeImageMetadata['metadata'];

export const ImageMetaInfoSkeletonLoading = () => (
  <Stack>
    <Skeleton
      bg="base.800"
      startColor="base.900"
      endColor="base.800"
      height="100px"
      speed={2}
    />
    <Skeleton
      mt="20"
      bg="base.800"
      startColor="base.900"
      endColor="base.800"
      height="20px"
      speed={2}
    />
    <Skeleton
      bg="base.800"
      startColor="base.900"
      endColor="base.800"
      height="20px"
      w="60%"
      speed={2}
    />
    <Skeleton
      bg="base.800"
      startColor="base.900"
      endColor="base.800"
      height="20px"
      w="60%"
      speed={2}
    />
    <Skeleton
      bg="base.800"
      startColor="base.900"
      endColor="base.800"
      height="20px"
      w="60%"
      speed={2}
    />
  </Stack>
);

export default function ImageMetaInfo(props: { metadata?: MetaInfo }) {
  const { metadata } = props;
  const {
    positive_prompt: prompt,
    negative_prompt: negativePrompt,
    model,
    width,
    height,
    seed,
    generation_mode,
    scheduler,
    steps,
    cfg_scale,
  } = metadata ?? {};
  const { onCopy: onPromptCopy, hasCopied: promptHasCopied } = useClipboard(
    prompt || ''
  );
  const { onCopy: onNegativePromptCopy, hasCopied: negativePromptHasCopied } =
    useClipboard(negativePrompt || '');
  const { t } = useTranslation();

  const prompt_bg = useColorModeValue('base.950', 'base.850');

  if (!metadata) {
    return null;
  }
  return (
    <>
      <Box p="4" rounded="md" bg={prompt_bg} shadow="md">
        <Text color="base.100" fontWeight="bold">
          Prompt:
        </Text>
        <Text mt={2} fontSize="sm" fontWeight="bold" color="base.300">
          {prompt}
        </Text>
        <HStack
          spacing={1}
          display="flex"
          justify="flex-end"
          alignItems="center"
          mt={2}
        >
          {promptHasCopied ? (
            <p>Copied!</p>
          ) : (
            <Tooltip label={t('profile.copyPrompt')} hasArrow placement="top">
              <IconButton
                color="base.300"
                aria-label=""
                icon={<RiFileCopy2Line />}
                size="xs"
                onClick={onPromptCopy}
                fontSize={20}
              />
            </Tooltip>
          )}
        </HStack>
      </Box>
      {negativePrompt && (
        <Box p="4" rounded="md" bg={prompt_bg} shadow="md">
          <Text>Negative prompt:</Text>
          <Text mt={2} fontSize="sm" color="base.300">
            {negativePrompt}
          </Text>
          <HStack
            spacing={1}
            display="flex"
            justify="flex-end"
            alignItems="center"
            mt={2}
          >
            {negativePromptHasCopied ? (
              <p>Copied!</p>
            ) : (
              <Tooltip label={t('profile.copyPrompt')} hasArrow placement="top">
                <IconButton
                  color="base.300"
                  aria-label=""
                  icon={<RiFileCopy2Line />}
                  size="xs"
                  onClick={onNegativePromptCopy}
                  fontSize={20}
                />
              </Tooltip>
            )}
          </HStack>
        </Box>
      )}
      <Box p="4">
        <Text
          mt={2}
          fontSize="sm"
          color="gray.600"
          _dark={{
            color: 'gray.400',
          }}
        >
          {t('profile.model')}: {model?.model_name}
        </Text>
        <Text
          mt={2}
          fontSize="sm"
          color="gray.600"
          _dark={{
            color: 'gray.400',
          }}
        >
          {t('profile.type')}:{' '}
          {generation_mode === 'txt2img'
            ? t(`profile.txt2img`)
            : t(`profile.img2img`)}
        </Text>
        <Text
          mt={2}
          fontSize="sm"
          color="gray.600"
          _dark={{
            color: 'gray.400',
          }}
        >
          {t('profile.size')}: {`${width} * ${height}`}
        </Text>
        <Text
          mt={2}
          fontSize="sm"
          color="gray.600"
          _dark={{
            color: 'gray.400',
          }}
        >
          {t('profile.sampler')}: {scheduler}
        </Text>
        <Text
          mt={2}
          fontSize="sm"
          color="gray.600"
          _dark={{
            color: 'gray.400',
          }}
        >
          {t('profile.seed')}: {seed}
        </Text>
        <Text
          mt={2}
          fontSize="sm"
          color="gray.600"
          _dark={{
            color: 'gray.400',
          }}
        >
          {t('profile.steps')}: {steps}
        </Text>

        <Text
          mt={2}
          fontSize="sm"
          color="gray.600"
          _dark={{
            color: 'gray.400',
          }}
        >
          {t('profile.cfg_scale')}: {cfg_scale}
        </Text>
      </Box>
    </>
  );
}
